// const { Router, Route, Link, browserHistory } = ReactRouter;
const { HashRouter, BrowserRouter, Switch, Route, Link, useHistory, useLocation, Redirect, NavLink } = ReactRouterDOM;
// 使用 ES6 的转译器，如 babel
//   import React from "react";
//   import { Router, Route, Link } from "react-router";

// const { connect } = ReactRedux

function Home() {
    return (
        <h3 className="container">Home</h3>
    )
}

function About() {
    return (
        <h3 className="container">About</h3>
    )
}

function Inbox(props) {
    return (
        <div className="container">
            <h2 className="title">Inbox</h2>
            <div className="content">
                {props.children || "Welcome to your Inbox"}
            </div>
        </div>
    );
}

/**
 * 高阶组件
 * 1、本身是一个函数
 * 2、参数一个react组件
 * 3、返回值是一个react组件
 */
function withEffect(ComposeComponent) {
    return class extends React.Component {
        render() {
            return <ComposeComponent></ComposeComponent>
        }
    }
}


class Dashboard extends React.Component {
    render() {
        return (<h3 className="container">Dashboard</h3>);
    }

}

const MyDashBoard = withEffect(Dashboard);

class Message extends React.Component {
    render() {
        return (<MyDashBoard />)
    }
}

class ErrorBoundary extends React.Component {
    render() {
        return (
            <div className="error-boundary">
                <h1>错误边界处理</h1>
            </div>
        )
    }
}

/**
 * redux组件
 */
class ReduxComponent extends React.Component {
    constructor(props) {
        super(props)
        console.log("props:", this.props)
    }
    render() {
        return (
            <div className="redux-box">
                <h2>redux演示</h2>
                <h3>{ this.props.count }</h3>
                <div className="btn-group">
                    <div className="btn btn-add" onClick={ this.props.increment }>加</div>
                    <div className="btn btn-delete" onClick={this.props.decrement }>减</div>
                    <div className="btn btn-update">乘</div>
                    <div className="btn btn-edit">除</div>
                </div>
            </div>
        )
    }
}



/**
 * 获取reducier
 * @params:{state}
 */
const mapStateToProps = (state) => {
    return {
        count: state.count
    }
}
console.log("读取mapStateToProps:", mapStateToProps(0))
/**
 * 获取action
 */
const mapDispatchToProps = (dispatch) => {
    return {
        increment: () => dispatch(increment()),
        decrement: () => dispatch(decrement())
    }
}
console.log("读取mapDispatchToProps:", mapDispatchToProps)
connect(mapStateToProps, mapDispatchToProps)(ReduxComponent)